<template>

  <v-container fluid grid-list-md class="custom-container" style="background-color: #f3f7fd">

    <xy-header-top title='云食安'></xy-header-top>

    <div class="scrollWrapper" ref="scrollWrapper">
      <v-layout wrap>
        <xy-scroll-status-bar :loading="loading" style="margin:0 auto;"></xy-scroll-status-bar>

        <v-flex xs12 sm12 md12 v-for="item in indexMenu" :key="item.menuCode" pt-4 pa-1>
          <xy-index-menu-card @click="menuClickHandle(item.menuCode)" :card-text="item.name"
                              :bg-image="color(item.menuCode).bgImage">
          </xy-index-menu-card>
        </v-flex>

      </v-layout>
    </div>
  </v-container>

</template>

<script>
    import {mapGetters, mapState} from 'vuex';
    import BScroll from 'better-scroll';
    import xyIndexMenuCard from '../views/card/IndexMenuCard';

    /**
     *  登录主页
     * @author Canaan
     * @date 2019/8/9 18:22.
     */
    export default {
        name: 'tastyIndex',
        mounted() {
            const clientH = document.body.clientHeight;
            document.getElementsByClassName("scrollWrapper")[0].style.height = clientH - 148 + 'px';

            this.itemScroll = new BScroll(this.$refs.scrollWrapper, {
                startY: 0,
                startX: 0,
                scrollY: true,
                scrollX: false,
                scrollbar: false,
                click: true,
                tap: true,
                pullUpLoad: true,
                pullDownRefresh: true
            });

            this.itemScroll.on('pullingDown', () => {
                this.reloadMenu().then(() => {
                    this.itemScroll.finishPullDown();
                    this.itemScroll.refresh();
                })

            })

        },
        created() {

        },
        components: {
            xyIndexMenuCard,
        },
        props: {},
        data() {
            return {
                colorOptionals: [{
                    key: 'materialIndex',
                    bgImage: "bg-material-info",
                    // remark: [{
                    //   text: "查看完整物料信息"
                    // }]
                }, {
                    key: 'inventoryIndex',
                    bgImage: "bg-inventory-record",
                    // remark: [{
                    //   text: "新增入库记录",
                    //   data: 30
                    // }]
                }, {
                    key: 'forewarningIndex',
                    bgImage: "bg-inventory-warning",
                    // remark: [{
                    //   text: "即将到期",
                    //   data: 20
                    // }, {
                    //   text: "已经到期",
                    //   data: 10
                    // }]
                }, {
                    key: 'configurationIndex',
                    bgImage: "bg-system-setup",
                    // remark: [{
                    //   text: "已更新至最新版本"
                    // }]
                },
                    {
                        key: 'brandReportIndex',
                        bgImage: "bg-inventory-report",
                        // remark: [{
                        //   text: "统计报表已生成",
                        //   data: "5月12日"
                        // }]
                    },
                    {
                        key: 'storeReportIndex',
                        bgImage: "bg-inventory-report",
                        // remark: [{
                        //   text: "统计报表已生成",
                        //   data: "5月12日"
                        // }]
                    },
                    {
                        key: 'inventoryTraceIndex',
                        bgImage: "bg-inventory-trace",
                        // remark: [{
                        //   text: "新增出库记录",
                        //   data: 50
                        // }]
                    }
                ]
            }
        },
        computed: {
            ...mapGetters([
                'indexMenu',
            ]),
            ...mapState({
                loading: state => state.navMenu.loading,
            }),
        },
        methods: {
            reloadMenu() {
                return this.$store.dispatch('loadNavMenu', this);
            },

            menuClickHandle(action) {
                this.$router.push('/' + action);
            },

            color(key) {
                let arr = this.colorOptionals.filter(item => {
                    return key === item.key;
                });
                return arr.length > 0 ? arr[0] : {
                    bgImage: ""
                };
            }

        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>

  .scrollWrapper {
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 5px 5px;
  }

</style>
